<template>
  <v-container v-wechat-title="this.userinfo.name+'的个人空间'">
    <v-dialog v-model="messagedialog" width="400">
      <v-card>
        <v-card-title class="headline">{{message}}</v-card-title>


        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            v-if="!uploadsucceed"
            color="primary"
            text
            @click="messagedialog=false"
          >重试</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!--关注、粉丝列表-->
    <v-dialog v-model="listdialog" scrollable max-width="500px" :fullscreen="$vuetify.breakpoint.xsOnly">
      <v-card>
        <v-toolbar dark color="primary">
        <v-btn icon dark @click="listdialog=false,listitems=null">
          <v-icon>mdi-close</v-icon>
        </v-btn>
        <v-toolbar-title>{{listtitle}}</v-toolbar-title>
      </v-toolbar>
      <v-container>
      <v-list two-line subheader>
      <v-list-item
        v-for="item in listitems"
        :key="item"
        @click=""
      >
        <v-list-item-avatar>
          <img :src="item.img">
        </v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title >{{item.name}}</v-list-item-title>
          <v-list-item-subtitle v-text="item.text"></v-list-item-subtitle>
        </v-list-item-content>

        <v-list-item-action>
          <router-link :to="{name:'space',query:{uid:item.uid}}" >
          <v-btn icon>
            <v-icon color="grey lighten-1">mdi-information</v-icon>
          </v-btn>
          </router-link>
        </v-list-item-action>
      </v-list-item>
      </v-list>
      </v-container>
      </v-card>
    </v-dialog>
    <v-dialog v-model="avatardialog" width="400" >
      <v-card width="400" id="avatardialog">
        <div class="cropper">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="false"
            :fixed="true"
            :fixedNumber="[1,1]"
            :full="option.full"
            :centerBox="true"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :fixedBox="option.fixedBox"
            @realTime="realTime"
          ></vueCropper>
        </div>
        <v-row>
          <v-col cols=8>
        <v-file-input
        
          v-model="avatarupfile"
          :rules="updaterules"
          type="file"
          label="上传图片"
          filled
          prepend-icon="mdi-camera"
          accept="image/png, image/jpeg, image/gif, image/jpg"
          class="ml-4"
          @change="uploadImg($event)"
        >
        <template v-slot:selection="{ text }">
      <v-chip
        small
        label
        color="primary"
      >
        {{ text }}
      </v-chip>
    </template>
        </v-file-input>
          </v-col>
        <!-- <input
          type="file"
          
          accept="image/png, image/jpeg, image/gif, image/jpg"
          @change="uploadImg($event)"
        >-->
        <!-- <span @click="down()">下载图片</span> -->
        <v-col cols=4>
        <v-row>
        <v-btn class="uploading" :loading="isuploading" color="primary" @click="finish()">{{$t("message.uploadimg")}}</v-btn>
        </v-row>
        <v-row>
          <v-btn text color="red" @click="avatardialog=false">{{$t("message.cancel")}}</v-btn>
        </v-row>
        </v-col>
        
        </v-row>
      </v-card>
    </v-dialog>
    <v-parallax
      id="usercontent"
      dark
      src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
    >
      <v-row justify="end">
        <v-col cols="1">
          <v-btn v-if="!readonly" text icon color="white">
            <v-icon size="32">mdi-pencil-outline</v-icon>
          </v-btn>
        </v-col>
      </v-row>
      <v-row></v-row>
      <v-row align="center" justify="start">
        <v-col class="text-center" cols="2">
          <v-avatar size="62" class="ml-5">
            <v-hover v-slot:default="{ hover }">
              <v-img :src="userinfo.img">
                <v-expand-transition v-if="!readonly">
                  <div
                    v-if="hover"
                    class="d-flex transition-fast-in-fast-out black darken-4 v-card--reveal display-3 white--text"
                    style="height: 100%;"
                  >
                    <v-btn x-large text icon color="white" @click="avatardialog=true">
                      <v-icon>mdi-pencil</v-icon>
                    </v-btn>
                  </div>
                </v-expand-transition>
                <template v-slot:placeholder>
                  <v-row class="fill-height ma-0" align="center" justify="center">
                    <v-progress-circular indeterminate color="primary"></v-progress-circular>
                  </v-row>
                </template>
              </v-img>
            </v-hover>
          </v-avatar>
          <v-btn class="ml-5 mt-2" color="primary" v-if="readonly" :outlined="isfocused" @click="onFocuse"> 
            {{focusetext}}
          </v-btn>
        </v-col>
        <v-col cols="10">
          <div class="pa-2 ml-5">
            <h1>{{userinfo.name}}<v-icon v-if="userinfo.sex=='男'" class="ml-2" color="blue">mdi-gender-male</v-icon>
            <v-icon v-else-if="userinfo.sex=='女'" class="ml-2" color="pink">mdi-gender-female</v-icon>
            <v-icon v-else class="ml-2" color="purple">mdi-gender-male-female</v-icon>
            <v-chip v-if="userinfo.type>=1" class="subtitle ml-1" dark color="pink">{{$t("message.teacherV")}}
            </v-chip>
            </h1>
             <transition :duration="{ enter: 500, leave: 0 }" name="scroll-y-reverse-transition">
            <h2 class="subtitle-1" v-if="!edittext">
              {{userinfo.text}}
              <v-btn v-if="!readonly" text icon color="white" @click="edittext=true,edittextinput=userinfo.text">
                <v-icon>mdi-pencil-outline</v-icon>
              </v-btn>
            </h2>
             </transition>
            <transition :duration="{ enter: 500, leave: 0 }" name="scroll-y-reverse-transition">
            <v-text-field
            style="max-width:300px"
            v-if="edittext"
            v-model="edittextinput"
            label="签名"
            dark
            filled
            rounded
            dense
            clearable
            append-icon="mdi-check"
            
            @click:append="edittextFun"
          ></v-text-field>
          </transition>
          </div>
        </v-col>
        
      </v-row>
    </v-parallax>
    <v-card id="usercontentc" class="ma-2 pa-5">
      <v-row fulid>
        <v-hover v-slot:default="{ hover }">
        
        <v-card width=350 class="pa-10 ma-3" :elevation="hover ? 15 : 1" :color="hover ? 'green' : ''" @click="openListSub">
          <v-row>
            <v-col cols=4>
              <div class="text-center ">
              <v-icon  :color="hover ? 'white' : ' '" size=96>
                mdi-account-alert
              </v-icon>
              </div>
            </v-col>
            <v-col cols=8>
              <div class="text-center ">
              <p class="title " :style="hover ? 'color:white':''">{{$t("message.subs")}}</p>
              <p class="headline " :style="hover ? 'color:white':''">{{subnumber}}</p>
              </div>
            </v-col>
          </v-row>
        </v-card>
        
        </v-hover>
        <v-hover v-slot:default="{ hover }">
        <v-card width=350 class="pa-10 ma-3" :elevation="hover ? 15 : 1" :color="hover ? 'red' : ''" @click="openListFan">
          <v-row>
            <v-col cols=4>
              <div class="text-center ">
              <v-icon  :color="hover ? 'white' : ' '" size=96>
                mdi-account-heart
              </v-icon>
              </div>
            </v-col>
            <v-col cols=8>
              <div class="text-center ">
              <p class="title " :style="hover ? 'color:white':''">{{$t("message.fans")}}</p>
              <p class="headline " :style="hover ? 'color:white':''">{{fannumber}}</p>
              </div>
            </v-col>
          </v-row>
        </v-card>
        </v-hover>
        <v-hover v-slot:default="{ hover }">
        <v-card width=350 class="pa-10 ma-3" :elevation="hover ? 15 : 1" :color="hover ? 'blue' : ''">
          <v-row>
            <v-col cols=4>
              <div class="text-center ">
              <v-icon  :color="hover ? 'white' : ' '" size=96>
                mdi-credit-card
              </v-icon>
              </div>
            </v-col>
            <v-col cols=8>
              <div class="text-center ">
              <p class="title" :style="hover ? 'color:white':''">{{$t("message.credits")}}</p>
              <p class="headline " :style="hover ? 'color:white':''">{{userinfo.credit}}</p>
              </div>
            </v-col>
          </v-row>
        </v-card>
        </v-hover>
        <v-hover v-slot:default="{ hover }">
        <v-card width=350 class="pa-10 ma-3" :elevation="hover ? 15 : 1" :color="hover ? 'orange' : ''">
          <v-row>
            <v-col cols=4>
              <div class="text-center ">
              <v-icon  :color="hover ? 'white' : ' '" size=96>
                mdi-star
              </v-icon>
              </div>
            </v-col>
            <v-col cols=8>
              <div class="text-center ">
              <p class="title" :style="hover ? 'color:white':''">{{$t("message.collection")}}</p>
              <p class="headline " :style="hover ? 'color:white':''">{{favors}}</p>
              </div>
            </v-col>
          </v-row>
        </v-card>
        </v-hover>
       
        

      </v-row>
      <v-divider></v-divider>
      <v-row>
        <div class="pa-2 ml-2 mt-4 display-2">{{$t("message.itsuploadvideos")}}</div>
        <div class="pa-2 ml-2 mt-4 display-1">{{uploadnumber}}</div>
      </v-row>
      
      <p class="ma-5 display-1" v-if="uploadnumber==0">{{$t("message.nouploads")}}</p>
      
      <v-container v-if="$vuetify.breakpoint.xsOnly" fluid>
      <!----手机端卡片生成---->
      <v-row align="start" justify="center">
        <v-hover
          v-slot:default="{ hover }"
          v-for="card in cards"
          :key="card"
          flex
          class="ml-1 mr-1 mt-4 mb-4"
        >
          <v-card :elevation="hover ? 15 : 2" id="card" class="ml-2 mr-2">
            <v-hover v-slot:default="{ hover }">
              <v-img class="white--text" height="200px" :src="card.pic">
                <v-expand-transition>
                  <div
                    v-if="hover"
                    class="d-flex transition-fast-in-fast-out black darken-4 v-card--reveal title white--text"
                    style="height: 100%;"
                  >
                    <p class="pa-4">{{card.text}}</p>
                    
                  </div>
                </v-expand-transition>
                <template v-slot:placeholder>
                  <v-row class="fill-height ma-0" align="center" justify="center">
                    <v-progress-circular indeterminate color="primary"></v-progress-circular>
                  </v-row>
                </template>
              </v-img>
            </v-hover>
            <v-card-text class="title pt-4" style="position: relative;">
                  <router-link :to="{name:'group',query:{gid:card.gid,index:1}}">
                    <v-btn absolute color="primary" class="white--text" fab large right top>
                      <v-icon>mdi-play</v-icon>
                    </v-btn>
                  </router-link>
                  <p class="text-truncate">{{card.name}}</p>
                </v-card-text>
            <v-card-actions>
              <v-tooltip bottom>
                <template v-slot:activator="{ on }">
                  <v-icon v-on="on">mdi-play</v-icon>
                </template>
                <span>播放量</span>
              </v-tooltip>
              <v-text>{{card.played}}</v-text>
              <v-tooltip bottom>
                <template v-slot:activator="{ on }">
                  <v-icon class="ml-4" v-on="on">mdi-star-face</v-icon>
                </template>
                <span>收藏</span>
              </v-tooltip>
              <v-text class="ml-2">{{card.favor}}</v-text>
              <v-spacer></v-spacer>
              
            </v-card-actions>
          </v-card>
        </v-hover>
      </v-row>
    </v-container>
      <v-container class="pa-2 d-none d-sm-flex">
      <!----卡片生成---->
      
      <v-row align="start" justify="center" no-gutters>
        
        <v-card class="ma-2" v-for="card1 in cards" :key="card1" flex>
          <v-lazy>
            <v-hover v-slot:default="{ hover }">
              <v-card :elevation="hover ? 15 : 2" id="card" max-width="300px">
                <v-hover v-slot:default="{ hover }">
                  <v-img class="white--text" height="200px" :src="card1.pic">
                    <v-expand-transition>
                      <div
                        v-if="hover"
                        class="d-flex transition-fast-in-fast-out black darken-4 v-card--reveal white--text title"
                        style="height: 100%;"
                      >
                        <p class="pa-4">{{card1.text}}</p>
                      </div>
                    </v-expand-transition>
                    <template v-slot:placeholder>
                      <v-row class="fill-height ma-0" align="center" justify="center">
                        <v-progress-circular indeterminate color="primary"></v-progress-circular>
                      </v-row>
                    </template>
                    
                  </v-img>
                </v-hover>
                <v-card-text class="title pt-4" style="position: relative;">
                  <router-link :to="{name:'group',query:{gid:card1.gid,index:1}}">
                    <v-btn absolute color="primary" class="white--text" fab large right top>
                      <v-icon>mdi-play</v-icon>
                    </v-btn>
                  </router-link>
                  <p class="text-truncate">{{card1.name}}</p>
                </v-card-text>
                <v-card-actions>
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on }">
                      <v-icon v-on="on">mdi-play</v-icon>
                    </template>
                    <span>播放量</span>
                  </v-tooltip>
                  <v-text>{{card1.played}}</v-text>
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on }">
                      <v-icon class="ml-4" v-on="on">mdi-star-face</v-icon>
                    </template>
                    <span>收藏</span>
                  </v-tooltip>
                  <v-text class="ml-2">{{card1.favor}}</v-text>
                  <v-spacer></v-spacer>
                  
                </v-card-actions>
              </v-card>
            </v-hover>
          </v-lazy>
        </v-card>
        
      </v-row>
    </v-container>
    </v-card>
  </v-container>
</template>

<script>
import { VueCropper } from "vue-cropper";
export default {
  components: {
    vueCropper: VueCropper
  },
  data: () => ({
    favors:0,
    focusetext:"",
    isfocused:false,
    uploadnumber:null,
    fannumber:null,
    subnumber:null,
    listitems:null, 
    listtitle:null,
    listdialog:false,
    cards:null,
    updaterules: [
        value => !value || value.size < 5000000 || 'Must less then 5Mb',
      ],
    edittextinput:'',
    edittext:false,
    message:"",
    uploadsucceed:false,
    isuploading:false,
    messagedialog:false,
    avatarupfile: [],
    avatardialog: false,
    readonly: true,
    userinfo: "",
    headImg: "",
    //剪切图片上传
    crap: false,
    previews: {},
    option: {
      img: "",
      outputSize: 1, //剪切后的图片质量（0.1-1）
      full: false, //输出原图比例截图 props名full
      outputType: "png",
      canMove: true,
      original: false,
      canMoveBox: false,
      autoCrop: true,
      fixedBox: true
    },
    fileName: "", //本机文件地址
    downImg: "#",
    uploadImgRelaPath: "" //上传后的图片的地址（不带服务器域名）
  }),
  created() {
    

    this.init();
  },
  watch: {
  '$route' (to, from) {
   // 监听路由的变化，做你想做的一些事情...
   this.init();
   location.reload();
  }
},

  methods: {
    favorsinit(){
      var loginBean = new URLSearchParams();
      loginBean.append("uid", this.userinfo.uid);
        this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/befocusednumber.php",
        data: loginBean
      })
        .then(response => {
          console.log(response.data);
          this.favors=response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    onFocuse(){
      var loginBean = new URLSearchParams();
      loginBean.append("who", this.userinfo.uid);
      loginBean.append("uid", Number(this.$cookies.get("user")));
      if(!this.isfocused){
        this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/onFocuse.php",
        data: loginBean
      })
        .then(response => {
          console.log(response.data);
          if(response.data==0){
            this.focusedinit();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
      }else{
        this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/antionFocuse.php",
        data: loginBean
      })
        .then(response => {
          console.log(response.data);
          if(response.data==0){
            this.focusedinit();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
      }
      
    },
    focusedinit(){
      var loginBean = new URLSearchParams();
      loginBean.append("who", this.userinfo.uid);
      loginBean.append("uid", Number(this.$cookies.get("user")));

      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/whoFocusewho.php",
        data: loginBean
      })
        .then(response => {
          console.log(response.data);
          this.isfocused=response.data;
          if(!this.isfocused){
            this.focusetext=this.$t("message.focuseplus");
          }else{
            this.focusetext=this.$t("message.unfocuse");
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    edittextinputInit(){
      this.edittextinput=this.userinfo.text;
    },
    openListSub(){
      this.listdialog=true;
      this.listtitle=this.userinfo.name+this.$t("message.whossub");
      var loginBean = new URLSearchParams();
      loginBean.append("uid", this.userinfo.uid); //你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/showsub.php",
        data: loginBean
      })
        .then(response => {
          
          this.listitems = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    openListFan(){
      this.listdialog=true;
      this.listtitle=this.userinfo.name+this.$t("message.whosfan");
      var loginBean = new URLSearchParams();
      loginBean.append("uid", this.userinfo.uid); //你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/showfans.php",
        data: loginBean
      })
        .then(response => {
          console.log(response.data);
          this.listitems = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    subnumberinit(){
        var params = new URLSearchParams();
    params.append("uid", Number(this.userinfo.uid));
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/focusednumber.php",
        data: params,
      })
        .then(response => {
          this.subnumber=response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    uploadnumberinit(){
        var params = new URLSearchParams();
    params.append("uid", Number(this.userinfo.uid));
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/uploadnumber.php",
        data: params,
      })
        .then(response => {
          this.uploadnumber=response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    fannumberinit(){
        var params = new URLSearchParams();
    params.append("uid", Number(this.userinfo.uid));
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/befocusednumber.php",
        data: params,
      })
        .then(response => {
          this.fannumber=response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    init() {
      
      //改成查用户
      

      var loginBean = new URLSearchParams();
      loginBean.append("fetchUserBean.uid", String(this.$route.query.uid)); //你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.137.177:8080/YimooBP1.0/myfetchuser",
        data: loginBean
      })
        .then(response => {
          this.userinfo = JSON.parse(response.data);
          console.log(this.userinfo);
          this.subnumberinit();
          this.fannumberinit();
          this.uploadnumberinit();
          this.favorsinit();
          if (this.$route.query.uid == this.$cookies.get("user")) {
      this.readonly = false;
    }else{
      this.focusedinit();
    }
    var Bean = new URLSearchParams();
      Bean.append("uid", Number(this.userinfo.uid));
       this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/getUseruploads.php",
        data: Bean
      })
        .then(response => {
          this.cards = response.data;
          console.log(response.data);
        })
        .catch(resp => {
          console.log("请求失败：" + resp.status + "," + resp.statusText);
        });
          //this.$route.meta.title=this.userinfo.name;
        })
        .catch(function(error) {
          console.log(error);
        });
        
    },
    finish() {
      let _this = this;
      let formData = new FormData();
      _this.isuploading=true;
      // 输出
      this.$refs.cropper.getCropBlob(data => {
        let img = window.URL.createObjectURL(data);
        console.log(data,this.fileName);
        formData.append("file", data);
        formData.append("uid",this.userinfo.uid);
        formData.append("fileName",this.userinfo.uid+".jpg");
        this.$axios({
        method: "post",
        url: "/api/YimooBP1.0/mypushimg",
        data: formData,
         
      })
        .then(response => {
          
          console.log(response.data);
          if(response.data=="success"){
            this.message=this.$t("message.uploadsuccess");
            this.uploadsucceed=true;
            this.messagedialog=true;
            this.init();
            location.reload();
          }else{
            this.message=this.$t("message.uploadfailed");
            this.uploadsucceed=false;
            this.messagedialog=true;
          }
          //this.$route.meta.title=this.userinfo.name;
        })
        .catch(function(error) {
          console.log(error);
        });
      });
    },
    // 实时预览函数
    realTime(data) {
      console.log(data);
      this.previews = data;
    },
    
    //选择本地图片
    uploadImg(e) {
      console.log("success");
      var _this = this;
      //上传图片
      var file = this.avatarupfile;
      _this.fileName = file.name;
      if (
        !/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(this.avatarupfile.name)
      ) {
        alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
        _this.avatarupfile=[];
        return false;
      }
      var reader = new FileReader();
      reader.onload = e => {
        let data;
        if (typeof e.target.result === "object") {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]));
        } else {
          data = e.target.result;
        }
        _this.option.img = data;
      };
      // 转化为base64
      // reader.readAsDataURL(file)
      // 转化为blob
      reader.readAsArrayBuffer(file);
    },
    edittextFun(){
      //写上传签名
      var params = new URLSearchParams();
    params.append("uid", Number(this.userinfo.uid));
    params.append("text", this.edittextinput);
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/resetText.php",
        data: params,
      })
        .then(response => {
          this.edittext=false;
          this.init();
          //this.$route.meta.title=this.userinfo.name;
        })
        .catch(function(error) {
          console.log(error);
        });
      
    }
  },
  beforeRouteUpdate(to, from, next) {
    
    next();
  }
};
</script>

<style lang="scss">
#avatardialog{
  overflow: hidden;
}
#usercontent {
  //position: absolute;
  width: 100%;
  top: -35px;
  //left: -10px;
  
}
#usercontentc {
  top: -80px;
  //position:absolute;
}

//改变背景色
.cropper-box {
  background: #333 !important;
}

//截图相关样式

.cropper {
  width: 400px;
  height: 400px;
  position: relative;
}
.show-preview {
  flex: 1;
  -webkit-flex: 1;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  .preview {
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #cccccc;
    background: #cccccc;
    margin-left: 40px;
  }
}
</style>